<template>
    <div class="jnb" id="Jnb"></div>
</template>
  
<script>
import * as echarts from "echarts";
export default {
    mounted() {
        this.echartsInit();
    },
    methods: {
        echartsInit() {
            echarts.init(document.getElementById("Jnb")).setOption({
                title: {
                    text: "|  物业费预收",
                    textStyle: {
                        color: "#B1E2FE",
                        fontSize: "12",
                    },
                },
                grid: {
                    top: 40,
                    x: 65,
                    x2: 75,
                    y2: 30,
                },
                textStyle: {
                    color: "#fff",
                },
                dataZoom: {
                    type: "inside",
                },
                xAxis: {
                    name: "预收金额",
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                        },
                    },
                },
                yAxis: {
                    name: "预收率",
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "#eee",
                        },
                    },
                },
                tooltip: {
                    trigger: "axis",
                    backgroundColor: "rgba(0,0,0,0.8)",
                    textStyle: {
                        color: "#fff",
                    },
                    axisPointer: {
                        type: "cross",
                    },
                },
                // backgroundColor: "rgba(0,0,0,0.2)",
                series: [
                    {
                        symbolSize: 0,
                        data: [
                            [5.0, 211],
                            [6.0, 114],
                            [8.0, 564],
                            [10.0, 3031],
                            [18.0, 1729],
                        ],
                        type: "scatter",
                    },
                    {
                        symbolSize: 5,
                        data: [[5.0, 211]],
                        type: "scatter",
                        name: "西南",
                    },
                    {
                        symbolSize: 8,
                        data: [[6.0, 114]],
                        type: "scatter",
                        name: "东北",
                    },
                    {
                        symbolSize: 16,
                        data: [[8.0, 564]],
                        type: "scatter",
                        name: "西南",
                    },
                    {
                        symbolSize: 20,
                        data: [[10.0, 3031]],
                        type: "scatter",
                        name: "全国",
                    },
                    {
                        symbolSize: 18,
                        data: [[18.0, 1729]],
                        type: "scatter",
                        name: "京津翼",
                    },
                ],
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.jnb {
    width: 100%;
    height: 170px;
    color: #fff;
}
</style>
  